<template>
    <div class="show">
        <div class="show-box">
            <span class="left"></span>
            <span class="englishText">wear display</span>
            <span class="text">穿搭展示</span>
            <span class="right"></span>
        </div>
        <div class="show-content">
            <div v-for="(item,index) in list" :key="index">
                <div :class="item.className">
                    <div class="show-text"><p>{{ item.title }}</p></div>
                    <img :src="item.src" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [{ 
                    className: "show-one",
                    src: require("../../assets/show1.jpg"),
                    title: "流水的It Shoes，铁打的「玛丽珍」！"
                },{
                    className: "show-two",
                    src: require("../../assets/show3.jpg"),
                    title: "德比鞋"
                },{
                    className: "show-three",
                    src: require("../../assets/show2.jpg"),
                    title: "2020流行颜色"
                }]
            }
        }
    }
</script>
<style>
    .englishText {
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        font-family: "Giddyup std";
    }
    .show-box, .show-content {
        width: 1100px;
        margin: 0 auto;
        overflow: hidden;
    }
    .show-box {
        margin-top: 120px;
        position: relative;
        padding-top: 30px;
        margin-bottom: 40px;
    }
    .left, .right {
        display: inline-block;
        width: 40%;
        height: 20px;
        position: relative;
    }
    .left:before,.right:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background: #000;
    }
    .text {
        margin: 0px 10px;
        font-size: 30px;
    }

    .show-content {
        margin-top: 40px;
        height: 700px;
        position: relative;
        padding: 40px 2% 0px;
        box-sizing: border-box;
        margin-bottom: 40px;
    }
    .show-text {
        position: absolute;
        bottom: 35px;
        left: 20px;
        z-index: 3;
    }
    .show-text p {
        color: #fff;
    }
    .show-one, .show-two, .show-three {
        width: 40%;
        position: absolute;
        top: 0;
        left: 4%;
        transition: transfrom 1s;
    }
    .show-two {
        left: 30%;
        top: 10%;
    }
    .show-three {
        left: 56%;
    }
    .show-one img, .show-two img, .show-three img {
        width: 100%;
        border-radius: 2px;
        transition: transform 1s;
    }
    .show-one:hover img, .show-two:hover img, .show-three:hover img {
        z-index: 2;
        position: relative;
        transform: scale(1.1);
        
    }
</style>